import React, { useState } from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  ScrollView,
  Image,
} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import Icon from 'react-native-vector-icons/MaterialIcons';

const IdentityVerificationScreen = ({ navigation }) => {
  const [selectedDocument, setSelectedDocument] = useState(null);

  const documents = [
    {
      id: 'passport',
      name: '护照',
      icon: '🛂',
      description: '国际旅行证件',
    },
    {
      id: 'id_card',
      name: '身份证',
      icon: '🆔',
      description: '国家身份证',
    },
    {
      id: 'driver_license',
      name: '驾驶证',
      icon: '🚗',
      description: '驾驶执照',
    },
  ];

  const handleDocumentSelect = (document) => {
    setSelectedDocument(document);
  };

  const handleNext = () => {
    if (selectedDocument) {
      navigation.navigate('DocumentScan', { documentType: selectedDocument });
    }
  };

  return (
    <LinearGradient colors={['#1a1a2e', '#16213e']} style={styles.container}>
      <ScrollView
        contentContainerStyle={styles.scrollContent}
        showsVerticalScrollIndicator={false}
      >
        <Image
          source={require('@assets/images/verification-illustration.png')}
          style={styles.illustration}
          resizeMode="contain"
        />
        
        <Text style={styles.title}>身份验证</Text>
        <Text style={styles.subtitle}>
          请选择您要用于验证的证件类型
        </Text>

        <View style={styles.documentsContainer}>
          {documents.map((document) => (
            <TouchableOpacity
              key={document.id}
              style={[
                styles.documentCard,
                selectedDocument === document.id && styles.selectedCard,
              ]}
              onPress={() => handleDocumentSelect(document.id)}
            >
              <Text style={styles.documentIcon}>{document.icon}</Text>
              <Text style={styles.documentName}>{document.name}</Text>
              <Text style={styles.documentDescription}>{document.description}</Text>
              {selectedDocument === document.id && (
                <View style={styles.checkmark}>
                  <Icon name="check-circle" size={24} color="#4CAF50" />
                </View>
              )}
            </TouchableOpacity>
          ))}
        </View>

        <TouchableOpacity
          style={[
            styles.nextButton,
            !selectedDocument && styles.disabledButton,
          ]}
          onPress={handleNext}
          disabled={!selectedDocument}
        >
          <Text style={styles.nextButtonText}>下一步</Text>
        </TouchableOpacity>
      </ScrollView>
    </LinearGradient>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  scrollContent: {
    flexGrow: 1,
    paddingHorizontal: 20,
    paddingVertical: 40,
  },
  illustration: {
    width: 200,
    height: 150,
    alignSelf: 'center',
    marginBottom: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#fff',
    textAlign: 'center',
    marginBottom: 10,
  },
  subtitle: {
    fontSize: 16,
    color: '#a0a0a0',
    textAlign: 'center',
    marginBottom: 30,
  },
  documentsContainer: {
    marginBottom: 30,
  },
  documentCard: {
    backgroundColor: 'rgba(255, 255, 255, 0.1)',
    borderRadius: 15,
    padding: 20,
    marginBottom: 15,
    flexDirection: 'row',
    alignItems: 'center',
    borderWidth: 2,
    borderColor: 'transparent',
  },
  selectedCard: {
    borderColor: '#4CAF50',
    backgroundColor: 'rgba(76, 175, 80, 0.1)',
  },
  documentIcon: {
    fontSize: 30,
    marginRight: 15,
  },
  documentName: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#fff',
    flex: 1,
  },
  documentDescription: {
    fontSize: 14,
    color: '#a0a0a0',
    position: 'absolute',
    bottom: 10,
    left: 65,
  },
  checkmark: {
    position: 'absolute',
    top: 10,
    right: 10,
  },
  nextButton: {
    backgroundColor: '#4CAF50',
    borderRadius: 25,
    paddingVertical: 15,
    alignItems: 'center',
    marginTop: 20,
  },
  disabledButton: {
    backgroundColor: '#666',
  },
  nextButtonText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: 'bold',
  },
});

export default IdentityVerificationScreen;
